<script setup>
import { defineProps } from 'vue'

const props = defineProps(['timeTop', 'timeBottom', 'cardTitle', 'cardContent', 'countPerson','activeClass','scheduleType'])
</script>

<template>
  <view class="schedule-card-list" :class="{ 'active-list': props.activeClass }">
    <view class="schedule-card-left">
      <view class="left-column">
        <p>{{ props.timeTop }}</p>
        <p>{{ props.timeBottom }}</p>
      </view>
      <view class="right-column">
        <p>{{ props.cardTitle }}</p>
        <text>{{ props.cardContent }}</text>
      </view>
    </view>
    <view class="schedule-card-right">
      <p>{{ props.countPerson }}人</p>
      <p>{{ props.scheduleType }}</p>
    </view>
  </view>
</template>

<style scoped lang="scss">
@import '@/static/style/index.scss';

.active-list {
  .schedule-card-left {
    .left-column {
      p {
        color: #c9cdd4 !important;
      }

      &::before {
        background: #f7f8fa !important;
      }
    }

    .right-column {
      p {
        color: #c9cdd4 !important;
      }

      text {
        color: #c9cdd4 !important;
      }
    }
  }

  .schedule-card-right {
    p {
      color: #c9cdd4 !important;
    }
  }
}

.schedule-card-list {
  padding: 24rpx 32rpx;
  @include flex($justify: space-between);
  border-bottom: 2rpx solid #e5e6eb;

  .schedule-card-left {
    flex: 3;
    @include flex(center);
    height: 100%;

    .left-column {
      margin-right: 17rpx;
      line-height: 50rpx;
      @include flex(center, space-between, column);
      height: 100%;
      position: relative;

      p {
        color: #86909c;
        font-size: 32rpx;
        font-style: normal;
        font-weight: 400;
      }

      &::before {
        content: '';
        position: absolute;
        right: -16rpx;
        top: 0;
        bottom: 0;
        width: 2px;
        height: 100%;
        background: #165dff;
      }
    }

    .right-column {
      margin-left: 17rpx;
      line-height: 50rpx;

      p {
        color: #1d2129;
        font-size: 32rpx;
        font-style: normal;
        font-weight: 500;
      }

      text {
        overflow: hidden;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;

        color: #86909c;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
      }
    }
  }

  .schedule-card-right {
    flex: 1;
    line-height: 50rpx;

    p {
      text-align: right;
      color: #86909c;
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
    }
  }
}
</style>
